<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Catalog-Z Contact page</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="fontawesome/css/all.min.css">
    <link rel="stylesheet" href="css/templatemo-style.css">
    <script src="js/jquery-3.3.1.js"></script>
    <!--

    TemplateMo 556 Catalog-Z

    https://templatemo.com/tm-556-catalog-z

    -->
</head>
<body>
<script>

    function sendMsg() {
        $.get("/photograph/user/sendMsg", $("#contact-form").serialize(),
            function (data) {
                alert("发送成功")
            },
            "json")
    }

</script>

<nav class="navbar navbar-expand-lg">
    <div class="container-fluid">
        <a class="navbar-brand" href="index.html">
            <i class="fas fa-film mr-2"></i>
            光与影
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
                aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <i class="fas fa-bars"></i>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav ml-auto mb-2 mb-lg-0">
                <li class="nav-item">
                    <a class="nav-link nav-link-1" href="index.html">照片</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link nav-link-4 active" aria-current="page" href="contact.html">联系我们</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<div class="tm-hero d-flex justify-content-center align-items-center" data-parallax="scroll"
     data-image-src="img/hero.jpg"></div>

<div class="container-fluid tm-mt-60">
    <div class="row tm-mb-50">
        <div class="col-lg-4 col-12 mb-5">
            <h2 class="tm-text-primary mb-5">Contact Page</h2>
            <form id="contact-form" action="" method="POST" class="tm-contact-form mx-auto">
                <div class="form-group">
                    <input type="text" name="name" class="form-control rounded-0" placeholder="Name" required/>
                </div>
                <div class="form-group">
                    <input type="email" name="email" class="form-control rounded-0" placeholder="Email" required/>
                </div>
                <div class="form-group">
                    <textarea rows="8" name="message" class="form-control rounded-0" placeholder="Message"
                              required=></textarea>
                </div>
                <div class="form-group tm-text-right">
                    <button onclick="sendMsg()" type="button" class="btn btn-primary">Send</button>
                </div>
            </form>
        </div>
        <div class="col-lg-4 col-12 mb-5">
            <div class="tm-address-col">
                <h2 class="tm-text-primary mb-5">Our Address</h2>
                <p class="tm-mb-50">Quisque eleifend mi et nisi eleifend pretium. Duis porttitor accumsan arcu id
                    rhoncus. Praesent fermentum venenatis ipsum, eget vestibulum purus. </p>
                <p class="tm-mb-50">Nulla ut scelerisque elit, in fermentum ante. Aliquam congue mattis erat, eget
                    iaculis enim posuere nec. Quisque risus turpis, tempus in iaculis.</p>
                <address class="tm-text-gray tm-mb-50">
                    120-240 Fusce eleifend varius tempus<br>
                    Duis consectetur at ligula 10660
                </address>
                <ul class="tm-contacts">
                    <li>
                        <a href="#" class="tm-text-gray">
                            <i class="fas fa-envelope"></i>
                            Email: info@company.com
                        </a>
                    </li>
                    <li>
                        <a href="#" class="tm-text-gray">
                            <i class="fas fa-phone"></i>
                            Tel: 010-020-0340
                        </a>
                    </li>
                    <li>
                        <a href="#" class="tm-text-gray">
                            <i class="fas fa-globe"></i>
                            URL: www.company.com
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="row tm-mb-74 tm-people-row">
        <div class="col-lg-3 col-md-6 col-sm-6 col-12 mb-5">
            <img src="img/1.jpg" alt="Image" class="mb-4 img-fluid">
            <h2 class="tm-text-primary mb-4">ZYD</h2>
            <h3 class="tm-text-secondary h5 mb-4">Chief Executive Officer</h3>
            <p class="mb-4">
                Mauris ante tellus, feugiat nec metus non, bibendum semper velit. Praesent laoreet urna id tristique
                fermentum. Morbi venenatis dui quis diam mollis pellentesque.
            </p>
            <ul class="tm-social pl-0 mb-0">
                <li><a href="https://facebook.com"><i class="fab fa-facebook"></i></a></li>
                <li><a href="https://twitter.com"><i class="fab fa-twitter"></i></a></li>
                <li><a href="https://linkedin.com"><i class="fab fa-linkedin"></i></a></li>
            </ul>
        </div>
        <div class="col-lg-3 col-md-6 col-sm-6 col-12 mb-5">
            <img src="img/2.jpg" alt="Image" class="mb-4 img-fluid">
            <h2 class="tm-text-primary mb-4">PZC</h2>
            <h3 class="tm-text-secondary h5 mb-4">Chief Marketing Officer</h3>
            <p class="mb-4">
                Sed faucibus nec velit finibus accumsan. Sed varius augue et leo pharetra, in varius lacus eleifend.
                Quisque ut eleifend lacus.
            </p>
            <ul class="tm-social pl-0 mb-0">
                <li><a href="https://facebook.com"><i class="fab fa-facebook"></i></a></li>
                <li><a href="https://twitter.com"><i class="fab fa-twitter"></i></a></li>
                <li><a href="https://linkedin.com"><i class="fab fa-linkedin"></i></a></li>
            </ul>
        </div>
        <div class="col-lg-3 col-md-6 col-sm-6 col-12 mb-5">
            <img src="img/3.jpg" alt="Image" class="mb-4 img-fluid">
            <h2 class="tm-text-primary mb-4">WYL</h2>
            <h3 class="tm-text-secondary h5 mb-4">Accounting Executive</h3>
            <p class="mb-4">
                Sed faucibus nec velit finibus accumsan. Sed varius augue et leo pharetra, in varius lacus eleifend.
                Quisque ut eleifend lacus.
            </p>
            <ul class="tm-social pl-0 mb-0">
                <li><a href="https://facebook.com"><i class="fab fa-facebook"></i></a></li>
                <li><a href="https://twitter.com"><i class="fab fa-twitter"></i></a></li>
                <li><a href="https://linkedin.com"><i class="fab fa-linkedin"></i></a></li>
            </ul>
        </div>
        <div class="col-lg-3 col-md-6 col-sm-6 col-12 mb-5">
            <img src="img/4.jpg" alt="Image" class="mb-4 img-fluid">
            <h2 class="tm-text-primary mb-4">WHY</h2>
            <h3 class="tm-text-secondary h5 mb-4">Creative Art Director #C69</h3>
            <p class="mb-4">
                Nunc convallis facilisis congue. Curabitur gravida rutrum justo sed pulvinar. Pellentesque ac ante in
                erat bibendum dignissim.
            </p>
            <ul class="tm-social pl-0 mb-0">
                <li><a href="https://facebook.com"><i class="fab fa-facebook"></i></a></li>
                <li><a href="https://twitter.com"><i class="fab fa-twitter"></i></a></li>
                <li><a href="https://linkedin.com"><i class="fab fa-linkedin"></i></a></li>
            </ul>
        </div>
    </div>
</div> <!-- container-fluid, tm-container-content -->

<footer class="tm-bg-gray pt-5 pb-3 tm-text-gray tm-footer">
    <div class="container-fluid tm-container-small">
        <div class="row">
            <div class="col-lg-6 col-md-12 col-12 px-5 mb-5">
                <h3 class="tm-text-primary mb-4 tm-footer-title">About Catalog-Z</h3>
                <p>Catalog-Z is free Bootstrap 5 Alpha 2 HTML Template for video and photo websites. You can freely use
                    this TemplateMo layout for a front-end integration with any kind of CMS website.</p>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-6 col-12 px-5 mb-5">
                <h3 class="tm-text-primary mb-4 tm-footer-title">Our Links</h3>
                <ul class="tm-footer-links pl-0">
                    <li><a href="#">Advertise</a></li>
                    <li><a href="#">Support</a></li>
                    <li><a href="#">Our Company</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-6 col-12 px-5 mb-5">
                <ul class="tm-social-links d-flex justify-content-end pl-0 mb-5">
                    <li class="mb-2"><a href="https://facebook.com"><i class="fab fa-facebook"></i></a></li>
                    <li class="mb-2"><a href="https://twitter.com"><i class="fab fa-twitter"></i></a></li>
                    <li class="mb-2"><a href="https://instagram.com"><i class="fab fa-instagram"></i></a></li>
                    <li class="mb-2"><a href="https://pinterest.com"><i class="fab fa-pinterest"></i></a></li>
                </ul>
                <a href="#" class="tm-text-gray text-right d-block mb-2">Terms of Use</a>
                <a href="#" class="tm-text-gray text-right d-block">Privacy Policy</a>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-8 col-md-7 col-12 px-5 mb-3">
                Copyright 2020 Catalog-Z Company. All rights reserved.
            </div>
            <div class="col-lg-4 col-md-5 col-12 px-5 text-right">
                Designed by <a href="https://templatemo.com" class="tm-text-gray" rel="sponsored" target="_parent">TemplateMo</a>
            </div>
        </div>
    </div>
</footer>

<script src="js/plugins.js"></script>

</body>
</html>